<!--
 * @Author: wangshuguang
 * @Date: 2022-04-27 14:34:53
 * @LastEditTime: 2022-04-28 18:09:35
 * @LastEditors: wangshuguang
 * @Description: 基础插件模板
-->

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <div class="leftLine title">
      插件{{ index }}：{{ form.pluginName }}
    </div>
    <div class="plugContent">
      <el-form-item label="" prop="openAmt">
        <span class="mg-r-20 formItemLabel">开通费用</span>
        <span class="mg-r-20">
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.openAmt" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" />
          <span v-else>{{ form.openAmt }}</span>
          元
        </span>
      </el-form-item>
      <el-form-item label="" prop="yearAutoPay">
        <span class="mg-r-20 formItemLabel">年费</span>
        <span class="mg-r-20">
          <span v-if="pageType == 'detail'" class="mg-r-20">
            {{ form.yearAutoPay == 1 ? '每年自动续费' : '无年费' }}
          </span>
          <el-select v-else v-model="form.yearAutoPay" size="small">
            <el-option label="每年自动续费" :value="1" />
            <el-option label="无年费" :value="0" />
          </el-select>
        </span>
      </el-form-item>
      <el-form-item label="" prop="minBkgeAmt">
        <span class="mg-r-20 formItemLabel">抽佣门槛</span>
        <span class="mg-r-20">
          会员实付金额≥
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.minBkgeAmt" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" />
          <span v-else>{{ form.minBkgeAmt }}</span>
          元才抽取佣金
        </span>
      </el-form-item>
      <el-form-item label="" prop="bkgeRate">
        <span class="mg-r-20 formItemLabel">插件抽佣比</span>
        <span class="mg-r-20">
          实付金额的
          <el-input-number v-if="['edit', 'add'].includes(pageType)" v-model="form.bkgeRate" :controls="false" class="numInput" size="small" :precision="0" :step="1" :min="0" :max="100" />
          <span v-else>{{ form.bkgeRate }}</span>
          %作为佣金，若会员使用插件实付100元，将抽取{{ form.bkgeRate }}元作为佣金
        </span>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    form: {},
    index: {},
    pageType: {}
  },
  data() {
    return {
      rules: {
        openAmt: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        minBkgeAmt: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        yearAutoPay: [{ validator: this.valid, trigger: ['change', 'blur'] }],
        bkgeRate: [{ validator: this.valid, trigger: ['change', 'blur'] }]
      }
    }
  },
  methods: {
    valid(rule, value, callback) {
      const { field } = rule
      let text = ''
      const _form = this.form
      console.log('rule, value, callback', field, _form)
      switch (field) {
        case 'openAmt': {
          // 开通费用
          if (!_form.openAmt && _form.openAmt != 0) {
            text = '请输入开通费用'
          }
          text ? callback(text) : callback()
          break
        }
        case 'yearAutoPay': {
          // 年费
          if (!_form.yearAutoPay && _form.yearAutoPay != 0) {
            text = `请填写年费`
          }
          text ? callback(text) : callback()
          break
        }
        case 'minBkgeAmt': {
          // 抽佣门槛
          if (!_form.minBkgeAmt && _form.minBkgeAmt != 0) {
            text = `请填抽佣门槛`
          }
          text ? callback(text) : callback()
          break
        }
        case 'bkgeRate': {
          // 插件抽佣比
          if (!_form.bkgeRate && _form.bkgeRate != 0) {
            text = `请填插件抽佣比`
          }
          text ? callback(text) : callback()
          break
        }
        default:
          break
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
